<template>
    <div class="Top">
        <div class="card">
        <div class="top">
            <h2 class="title">数据指标</h2>
             <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
        </div>
        <div class="left" v-show="value=='选项1'"></div>
        <div class="left2" v-show="value=='选项2'"></div>
    </div>
    <div class="card">
        <div class="top">
        <h2 class="title">数据指标</h2>
    <div>
            <el-select v-model="value2" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-button type="success" @click="outExcel">导出</el-button>
    </div>
    </div>
    <div class="right">
        <table  style="width:100%;height:100%;padding:0 20px">
          
                <tr v-for="item in list" :key="item.title">
                    <td><img :src='item.img'  alt=""></td>
                    <td>{{item.title}}</td>
                    <td>{{item.time}}</td>
                    <td>{{item.timeOut}}</td>
                </tr>
               
            
        </table>
    </div>
    </div>
    </div>
</template>

<script>
import img1 from '../img/shujufenxi_27.png'
import img2 from '../img/shujufenxi_30.png'
import img3 from '../img/shujufenxi_34.png'
import img4 from '../img/shujufenxi_37.png'
import { export_json_to_excel } from '../../../utils/Export2Excel'
import * as echarts from 'echarts';
export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '草莓棚'
        }, {
          value: '选项2',
          label: '西瓜棚'
        }, ],
        value: '选项1',
        value2: '选项1',
        list:[
            {img:img1,title:"播种时间",time:'2021-3-15',timeOut:'更新时间在24小时内'},
            {img:img2,title:"收货时间",time:'2021-6-15',timeOut:'更新时间在24小时内'},
            {img:img3,title:"当前状态",time:'幼苗期',timeOut:'更新时间在24小时内'},
            {img:img4,title:"预估产量",time:'180千克/亩',timeOut:'更新时间在24小时内'},
            ]
        
      }
    },
    methods:{
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
                return v[j]
            }))
        },
        outExcel(){
            const tHeader =  ['信息类别', '时间', '更新时间', ]
            const filterVal = ['title', 'time', 'timeOut', ]
            const data = this.formatJson(filterVal,this.list)
            	export_json_to_excel({
    		    header: tHeader,//excel头部列表
                  data,//数据
                  filename: '作物信息',//文件名称
                  autoWidth: true,//自适应宽
                  bookType: 'xlsx'//文件类型
    		     })
        },
         set(){
            var myChart = echarts.init(document.getElementsByClassName('left')[0]);
            myChart.setOption( {

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
     


  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    show:false,
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    
    axisLine:{
         show:false
    },
    type: 'category',
    axisTick:{
        show:false
    },
     axisLabel:{
        show:true,
        
     },
    data: ['空气温度', '光照', '土壤湿度', '空气湿度', '土壤温度'],
     inverse:true
  },
  series: [
    {
      name: '最佳指标',
      type: 'bar',
      data: [30, 15, 22, 52, 33, 35],
    label:{
        show: true,
          precision: 1,
          position: 'right',
          valueAnimation: true,
          fontFamily: 'monospace',
          formatter:(data)=>{
            if(data.name=="空气温度"){
                return data.value+'/℃'
            }
            if(data.name=="光照"){
                return data.value+'/lux'
            }
            if(data.name=="土壤湿度"){
                return data.value+'%'
            }
            if(data.name=="空气湿度"){
                return data.value+'%'
            }
            if(data.name=="土壤温度"){
                return data.value+'/℃'
            }
          }
          
    },
      
    },
    {
      name: '当前指标',
      type: 'bar',
      data: [17, 26, 36, 12, 33, 33],
      label:{
        show: true,
        precision: 1,
        position: 'right',
        valueAnimation: true,
        fontFamily: 'monospace',
        formatter:(data)=>{
            if(data.name=="空气温度"){
                return data.value+'/℃'
            }
            if(data.name=="光照"){
                return data.value+'/lux'
            }
            if(data.name=="土壤湿度"){
                return data.value+'%'
            }
            if(data.name=="空气湿度"){
                return data.value+'%'
            }
            if(data.name=="土壤温度"){
                return data.value+'/℃'
            }
          }
       
    },
    }
  ],
  color:['#E5E5E5', '#526EFE']
});},
         set2(){
            var myChart = echarts.init(document.getElementsByClassName('left2')[0]);
            myChart.setOption( {

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
     


  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    show:false,
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    
    axisLine:{
         show:false
    },
    type: 'category',
    axisTick:{
        show:false
    },
     axisLabel:{
        show:true,
        
     },
    data: ['空气温度', '光照', '土壤湿度', '空气湿度', '土壤温度'],
     inverse:true
  },
  series: [
    {
      name: '最佳指标',
      type: 'bar',
      data: [3000, 15, 22, 52, 33, 35],
    label:{
        show: true,
          precision: 1,
          position: 'right',
          valueAnimation: true,
          fontFamily: 'monospace',
          formatter:(data)=>{
            if(data.name=="空气温度"){
                return data.value+'/℃'
            }
            if(data.name=="光照"){
                return data.value+'/lux'
            }
            if(data.name=="土壤湿度"){
                return data.value+'%'
            }
            if(data.name=="空气湿度"){
                return data.value+'%'
            }
            if(data.name=="土壤温度"){
                return data.value+'/℃'
            }
          }
          
    },
      
    },
    {
      name: '当前指标',
      type: 'bar',
      data: [17, 26, 36, 12, 33, 33],
      label:{
        show: true,
        precision: 1,
        position: 'right',
        valueAnimation: true,
        fontFamily: 'monospace',
        formatter:(data)=>{
            if(data.name=="空气温度"){
                return data.value+'/℃'
            }
            if(data.name=="光照"){
                return data.value+'/lux'
            }
            if(data.name=="土壤湿度"){
                return data.value+'%'
            }
            if(data.name=="空气湿度"){
                return data.value+'%'
            }
            if(data.name=="土壤温度"){
                return data.value+'/℃'
            }
          }
       
    },
    }
  ],
  color:['#E5E5E5', '#526EFE']
});}
    },
    mounted(){
        this.set()
        this.set2()
    }
}
</script>

<style lang="less" scoped>
.Top{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .card{
        border: 3px solid #fff;
        border-radius: 5px;
        box-shadow: 0px 0px 10px 0px #D2D9DE; 
    }
        .el-select{
        width: 100px;
        
            /deep/.el-input__inner{
            color: #91959B;
            font-weight: 600;
        }
        
    }
    
    .top{
        width: 500px;
        height: 50px;
        background-color: #fff;
        box-sizing: border-box;
        border-bottom: 2px solid #EAF1F7;
        display: flex;
        justify-content: space-between;
        padding: 0 24px;
        align-items: center;
        .el-button--success{
            background-color: #1FCBB8;
            margin-left: 20px;
        }
        .title{
            font-size: 16px;
            color: #8F9298;
            height: 18px;
            line-height: 18px;
            border-left: 5px solid #526EFE;
            padding-left: 10px;
            font-weight: 700;
        }
    }
    .left,.left2,.right{
        width: 500px;
        height:300px;
        background-color:#fff;
        
    }
   .right{
    padding:5px 20px 30px 20px;
   }
    tr{
        border-bottom: 2px solid #EEF4F8;
        height: 25%;
        text-align: center;
        line-height: 66px;
        padding-left: 20px;
        td{
        font-size: 18px;
        color: #404141;
         img{
             vertical-align: middle;
           }
    }
        td:nth-child(1){
            padding-left: 20px;
        }
         td:nth-child(3){
        color: #68696A;
    }
        td:nth-of-type(4n){
        font-size: 14px;
        color: #8C8C8C;
    }
        }
    
</style>